<template>
  <div class="box button-group">
    <button :disabled="leftBtnDisabled" @click="leftBtnClick">&lt;</button>
    <button :disabled="rightBtnDisabled" @click="rightBtnClick">&gt;</button>
  </div>
</template>

<script setup>
const props = defineProps({
  leftBtnDisabled: {
    type: Boolean,
    default: true
  },
  rightBtnDisabled: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['leftBtnClick', 'rightBtnClick']);

const leftBtnClick = () => {
  emit('leftBtnClick');
};

const rightBtnClick = () => {
  emit('rightBtnClick');
};
</script>

<style lang="scss" scoped>
.button-group {
  display: flex;
  justify-content: center;
  align-items: center;

  button {
    border: none;
    outline: none;
    width: 30px;
    height: 30px;
    background-color: #a0cfff;
    color: #fff;
    border-radius: 5px;

    &:disabled {
      opacity: 0.6;
    }

    &:nth-child(2) {
      margin-left: 10px;
    }
  }
}
</style>
